import 'package:auto_route/annotations.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:sonora/bloc/mine/sj_mine_bloc.dart';
import 'package:sonora/bloc/mine/sj_mine_event.dart';
import 'package:sonora/bloc/mine/sj_mine_state.dart';
import 'package:sonora/config/sj_app_initial.dart';
import 'package:sonora/models/sj_block_list_item_data.dart';
import 'package:sonora/shared/lib/constants/sj_colors.dart';
import 'package:sonora/utils/sj_text_style.dart';
import 'package:sonora/views/appbar/sj_appbar.dart';

@RoutePage()
class SjBlockListPage extends StatelessWidget {
  const SjBlockListPage({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true, // 使内容延伸到导航
      appBar: SjAppbar(
        title: const Text(
          'Block List',
          style: SjTextStyle.customFontBlack20,
        ),
        backgroundColor: Colors.transparent, // 设置导航栏背景为透明
        elevation: 0, // 去除导航栏阴影
        leading: IconButton(
          icon: Image.asset('assets/images/nav_back.png'), // 左侧按钮
          onPressed: () {
            // 处理返回逻辑
            Navigator.of(context).pop();
          },
        ),
      ),
      body: BlocProvider<SjMineBloc>.value(
        value: getit<SjMineBloc>()..add(const SjMineEventLoadedBlockList()),
        child: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: AssetImage('assets/images/post_bg.png'),
              fit: BoxFit.cover,
            ),
          ),
          child: SafeArea(
            child: Column(children: [
              Expanded(child: BlocBuilder<SjMineBloc, SjMineState>(
                builder: (context, state) {
                  return (state.blokList == null || state.blokList!.isEmpty)
                      ? Image.asset('assets/images/block_list_empty.png')
                      : ListView.builder(
                          padding: const EdgeInsets.symmetric(horizontal: 20),
                          shrinkWrap: true,
                          itemBuilder: ((context, index) {
                            final SjBlockListItemData friend =
                                state.blokList!.elementAt(index);
                            return Padding(
                              padding: const EdgeInsets.only(bottom: 16),
                              child: Container(
                                padding: const EdgeInsets.fromLTRB(20, 15, 20, 15),
                                decoration: const BoxDecoration(
                                  color: SjColors.themeAColor,
                                  borderRadius:
                                      BorderRadius.all(Radius.circular(12.0)),
                                ),
                                child: Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Row(children: [
                                        Container(
                                          width:
                                              40, // Diameter (2 * radius) = 2 * 15
                                          height:
                                              40, // Diameter (2 * radius) = 2 * 15
                                          decoration: BoxDecoration(
                                            shape: BoxShape.circle,
                                            image: DecorationImage(
                                              image: NetworkImage(friend
                                                      .avatar ??
                                                  ''), // Replace with your avatar image URL
                                              fit: BoxFit.cover,
                                            ),
                                            border: Border.all(
                                              color: Colors
                                                  .black, // Border color
                                              width: 2, // Border width
                                            ),
                                            boxShadow: const [
                                              BoxShadow(
                                                color: SjColors
                                                    .themeColor, // Shadow color and opacity
                                                offset: Offset(1,
                                                    1), // Shadow offset (x, y)
                                              ),
                                            ],
                                          ),
                                        ),
                                        const SizedBox(
                                          width: 12,
                                        ),
                                        Column(
                                          crossAxisAlignment: CrossAxisAlignment.start,
                                          children: [
                                            Text(
                                              friend.nickName ??
                                                  '',
                                              style: SjTextStyle
                                                  .customFontBlack16,
                                            ),
                                            Text(
                                              friend.registerCountry ?? '',
                                              style: SjTextStyle
                                                  .customFontBlack14,
                                            )
                                          ],
                                        )
                                      ]),
                                      InkWell(
                                        child: Image.asset(
                                            'assets/images/block_tick_icon.png'),
                                        onTap: () {
                                          context.read<SjMineBloc>().add(
                                              SjMineEventRemoveBlock(
                                                  broadcasterId:
                                                      friend.broadcasterId ??
                                                          ''));
                                          // getit<SjMineBloc>().add(SjMineEventRemoveBlock(broadcasterId: friend.broadcasterId ?? ''));
                                        },
                                      )
                                    ]),
                              ),
                            );
                          }),
                          itemCount: state.blokList?.length);
                  ;
                },
              ))
            ]),
          )),
      )
    );
  }
}
